<template>
    <!-- 头部 -->
    <div class="header">
      <van-row>
        <van-col>
          <img src="./images/logo.png" class="logo" />
        </van-col>
        <van-col>
          <van-search
            @click.stop="toSearch"
            class="search"
            v-model="keyword"
            placeholder="搜索商品，共124704件好物"
          />
        </van-col>
        <van-col>
          <div @click="toLogin" class="loginBtn">登录</div>
        </van-col>
      </van-row>
    </div>

    <!-- tab列表 -->
    <van-tabs
      class="tabs"
      style="height: 1.07rem"
      color="#e43c33"
      line-height=".06rem"
      title-active-color="#e43c33"
      sticky
      animated
      v-model:active="activeName"
      @click="changeActive"
    >
      <van-tab to="/" title="推荐"> </van-tab>
      <van-tab
        v-for="(category, index) in categoryList"
        :key="index"
        :title="category.name"
        :url="`/item/homeList?categoryId=${category.id}`"
        :name="queryId"
      >
      </van-tab>
    </van-tabs>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {type CateGoryList} from '../../api/home'
const keyword = ref('')
const route = useRoute()
const router = useRouter()
const props = defineProps<{
  categoryList:CateGoryList,
}>()
const activeName = ref<number>(1)
const queryId = Number(route.query.categoryId)


const changeActive = () => {
  const categoryIdList = JSON.parse(localStorage.getItem('categoryId') as string)
  categoryIdList.forEach((item:string)=>{
    
    if(Number(item) === queryId){
      console.log('item',item);
      console.log('queryId',queryId);
      
      setTimeout(() => {
        activeName.value = Number(item)
        console.log('activeName',activeName.value);
      }, 5000)
    }
  })
}
onMounted(()=>{
  changeActive()
})
// 获取tab栏数据
  const toSearch = () => {
  router.push('/search')
}

const toLogin = () => {
  router.push('/login')
}

</script>

<style scoped>
.logo {
  width: 83%;
  display: inline-block;
  padding: 0.31rem 0 0 0.33rem;
}

.search {
  width: 6.5rem;
  margin: 0.2rem 0 0 -0.55rem;
  height: 0.8rem;
  --van-search-content-background: #ededed;
  --van-search-input-height: 0.85rem；;
}

.loginBtn {
  margin: 0.3rem 0 0 -0.1rem;
  width: 1rem;
  height: 0.53rem;
  color: rgb(199, 43, 43);
  line-height: 0.53rem;
  text-align: center;
  font-size: 0.22rem;
  border-radius: 0.1rem;
  border: 0.03rem solid rgb(199, 43, 43);
}

.tabs >>> .van-tabs__line {
  position: absolute;
  bottom: 0.65rem;
  left: 0;
  z-index: 1;
  width: var(--van-tabs-bottom-bar-width);
  height: var(--van-tabs-bottom-bar-height);
  background: var(--van-tabs-bottom-bar-color);
  border-radius: var(--van-tabs-bottom-bar-height);
}
</style>